import React from 'react';
import {Card, Tag, Typography, Space, Divider} from 'antd';
import type {IOrderDetail} from './types';
import './style.less';
import {parseNumber} from "@/utils/NumberUtils";

const {Text, Title} = Typography;

const ProductCard = ({product}: { product: IOrderDetail }) => (
  <Card className="product-card" hoverable>
    <div className="card-header">
      <Title level={5} ellipsis={{rows: 1}} className="product-name">
        {product.productName}
      </Title>
      <Space size={4}>
        <Tag color="blue">{product.brand}</Tag>
        <Tag color="geekblue">{product.modelType}</Tag>
      </Space>
    </div>

    <Divider dashed style={{margin: '12px 0'}}/>

    <div className="card-body">
      <div className="info-row">
        <Text type="secondary">数量:</Text>
        <Text strong>
          {product.number} {product.actualNum !== product.number &&
          `(实发 ${product.actualNum})`}
        </Text>
      </div>

      <div className="info-row">
        <Text type="secondary">单价:</Text>
        <Text>¥{product.unitPrice.toFixed(2)}</Text>
      </div>

      <div className="info-row">
        <Text type="secondary">商品总价:</Text>
        <Text strong type="primary">
          ¥{product.actualPrice.toFixed(2)}
        </Text>
      </div>
      <div className="info-row">
        <Text type="secondary">押金:</Text>
        <Text strong type="primary">
          ¥{parseNumber(product.gouTongNumber) * parseNumber(product.tongPrice)}
        </Text>
      </div>

      <div className="info-row">
        <Text type="secondary">小计:</Text>
        <Text strong type={product.actualPrice > product.totalPrice ? 'danger' : 'success'}>
          ¥{product.totalPrice.toFixed(2)}
        </Text>
      </div>
    </div>

    <Divider dashed style={{margin: '12px 0'}}/>

    <div className="card-footer">
      <Space>
        <Tag color={product.status === '1' ? 'green' : 'orange'}>
          {product.status === '1' ? '已完成' : '处理中'}
        </Tag>
        {/*{product.needReturn === '1' && product.huiTongNumber === 0 ? <Tag color="purple">需返还</Tag> : ''}*/}
      </Space>
    </div>
  </Card>
);

const OrderProductsGrid: React.FC<{ data: IOrderDetail[] }> = ({data}) => {
  const totalAmount = data.reduce((sum, item) => sum + item.totalPrice, 0);

  return (
    <div className="products-grid-container">
      <div className="products-grid">
        {data.map((item) => (
          <ProductCard key={`${item.productId}-${item.id}`} product={item}/>
        ))}
      </div>

      <div className="grid-summary">
        <Text strong>共 {data.length} 件商品</Text>
        <Text strong type="primary">
          合计: ¥{totalAmount.toFixed(2)}
        </Text>
      </div>
    </div>
  );
};

export default OrderProductsGrid;
